<template>
	<view class="page-content">
		<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>

		<u--form labelWidth='auto' labelPosition="left" :model="detailform" :rules="rules" ref="form1">

			<u-form-item label="设备名称" prop="deviceName" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.deviceName"></u--input>
			</u-form-item>

			<u-form-item label="设备编码" prop="deviceNum" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.deviceNum"></u--input>
			</u-form-item>

			<u-form-item label="是否网关设备" prop="isGateway" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.isGateway"></u--input>
			</u-form-item>

			<u-form-item label="所属网关编码" prop="gatewayNum" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.gatewayNum"></u--input>
			</u-form-item>

			<u-form-item label="生产厂商" prop="manufacturer" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.manufacturer"></u--input>
			</u-form-item>
			<u-line color="#2979ff"></u-line>


			<u-form-item label="长者姓名" prop="name" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.name"></u--input>
			</u-form-item>

			<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true; hideKeyboard()" ref="item1">
				<u--input v-model="detailform.sex" inputAlign='center' disabled disabledColor="#ffffff"
					placeholder="请选择性别" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="身份证号码" prop="idNumber" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.idNumber"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" prop="phone" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.phone"></u--input>
			</u-form-item>

			<u-line color="#2979ff"></u-line>
			<u-form-item label="省" prop="province" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.province"></u--input>
			</u-form-item>
			<u-form-item label="市" prop="city" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.city"></u--input>
			</u-form-item>
			<u-form-item label="镇" prop="town" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.town"></u--input>
			</u-form-item>
			<u-form-item label="村" prop="village" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.village"></u--input>
			</u-form-item>
			<u-form-item label="街" prop="street" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.street"></u--input>
			</u-form-item>

			<u-form-item label="详细地址" prop="residenceAdd" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.residenceAdd"></u--input>
			</u-form-item>
			<u-form-item label="门牌号" prop="roomNum" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.roomNum"></u--input>
			</u-form-item>

			<u-line color="#2979ff"></u-line>



			<u-form-item label="紧急联系人" prop="emergencyContactName" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.emergencyContactName">
				</u--input>
			</u-form-item>
			<u-form-item label="紧急联系人电话" prop="emergencyContactPhone" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.emergencyContactPhone">
				</u--input>
			</u-form-item>
			<u-line color="#2979ff"></u-line>


			<u-form-item label="部署人员" prop="detailform.deployName" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.deployName"></u--input>
			</u-form-item>
			<u-form-item label="登记人员" prop="detailform.registerName" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.registerName"></u--input>
			</u-form-item>

			<u-form-item label="审核人员" prop="detailform.auditorName" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.auditorName">
				</u--input>
			</u-form-item>
			<u-form-item label="入户时间" prop="detailform.deviceDeploy" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.deviceDeploy">
				</u--input>
			</u-form-item>
			<u-form-item label="备注" prop="detailform.notes" borderBottom ref="item1">
				<u--input inputAlign='center' shape='square' border="none" v-model="detailform.notes">
				</u--input>
			</u-form-item>

		</u--form>

		<!-- <u-cell-group>
				<u-cell title="设备名称" :value="detailform.deviceName"></u-cell>
				<u-cell title="设备编码" :value="detailform.deviceNum"></u-cell>
				<u-cell title="设备属性" :value="detailform.deviceType"></u-cell>
				<u-cell title="是否网关设备" :value="detailform.isGateway"></u-cell>
				<u-cell title="所属网关编码" :value="detailform.gatewayNum"></u-cell>
				<u-cell title="生产厂商" :value="detailform.manufacturer"></u-cell>
				<u-line color="#2979ff"></u-line>

				<u-cell title="老人姓名" :value="detailform.name"></u-cell>
				<u-cell title="性别" :value="detailform.sex"></u-cell>
				<u-cell title="身份证号码" :value="detailform.idNumber"></u-cell>
				<u-cell title="联系电话" :value="detailform.phone"></u-cell>
				<u-cell title="居住地址" :value="getAddress(detailform)">
				</u-cell>
				<u-cell title="详细地址" :value="getDetailAddress(detailform)"></u-cell>
				<u-cell title="紧急联系人" :value="detailform.emergencyContactName"></u-cell>
				<u-cell title="紧急联系人电话" :value="detailform.emergencyContactPhone"></u-cell>
				<u-line color="#2979ff"></u-line>

				<u-cell title="部署人员" :value="detailform.deployName"></u-cell>
				<u-cell title="登记人员" :value="detailform.registerName"></u-cell>
				<u-cell title="审核人员" :value="detailform.auditorName"></u-cell>
				<u-cell title="入户时间" :value="detailform.deviceDeploy"></u-cell>
				<u-cell title="备注" :value="detailform.notes"></u-cell>
			</u-cell-group> -->

		<u-row customStyle="margin:10px">
			<u-col span="12">
				<u-button class="custom-style" type="primary" size="small" @click="handel_submit_click" text="提交">
				</u-button>
			</u-col>
		</u-row>

		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>

	</view>
</template>

<script>
	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";
	import {
		QueryDeviceInstallList,
		addDeviceInstall,
		updateDeviceInstall,
		getDeviceInstall,
		delDeviceInstall,
		QueryDeviceInstallHistory
	} from "@/api/elder/DeviceInstall.js";

	export default {
		data() {
			return {
				detailform: {
					deviceName: '', //设备名称
					deviceNum: '', //设备编码
					deviceType: '', //设备属性
					isGateway: '', //是否网关设备
					gatewayNum: '', //所属网关编码
					manufacturer: '', //生产厂商

					name: '', //老人姓名
					sex: '', //性别
					idNumber: '', //身份证号码
					phone: '', //联系电话
					province: '',
					city: '',
					district: '',
					town: '',
					village: '',
					street: '',
					roomNum: '', //房屋号
					residenceAdd: '', //详细地址

					emergencyContactName: '', //紧急联系人
					emergencyContactPhone: '', //紧急联系人电话

					institutionName: '', //所属养老机构
					institutionCode: '', //机构社会信用代码

					deployName: '', //部署人员
					registerName: '', //登记人员
					auditorName: '', //审核人员
					deviceDeploy: '', //入户时间
					notes: '' //备注
				},
				loading: false, //加载中
				id: null,
				showSex: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					idNumber: {
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					},
					deviceNum: {
						type: 'string',
						required: true,
						message: '请填写设备编码',
						trigger: ['blur', 'change']
					},
					sex: {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad: function() {},
		computed: {},
		methods: {
			sexSelect(item) {
				this.detailform.sex = item.name
			},
			handel_submit_click() {
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过,正在提交...')
					//提交修改
					this.loading = true;
					addDeviceInstall(this.detailform).then((response) => {
						console.log("addDeviceInstall", response);
						this.loading = false;
						this.$tab.navigateBack();
					});
				}).catch(errors => {
					uni.$u.toast('校验失败,请修改后再尝试提交')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	page {
		background-color: white;
		display: flex;
		justify-content: center;
	}

	.page-content {
		width: 93%;
	}

	.custom-style {
		width: 80%;
		font-size: 20px;
		font-weight: bolder;
	}
</style>
